<template>
	<view>
		<view class="box">
			<scroll-view scroll-y style="height:1072rpx;">
				<uni-swipe-action class="smallbox" v-for="item in getCitylist" :key="item.id">
					<uni-swipe-action-item :right-options='options' @click="ClickDelete(item.id)">
						<view @click.stop="Clickcity(item.id)">
							<view class="smallboxL">
								<view class="smallboxLtop">
									<view class="name">{{ item.receiver }}</view>
									<text class="dianhau">{{ item.contact }}</text>
								</view>
								<view class="smallboxLB">
									<view class="default" v-if="item.isDefault">默认</view>
									<view class="city" v-else>{{ item.fullLocation.substring(0,2)}}</view>
									<text class="address">{{ item.fullLocation }}</text>
								</view>
							</view>
							<view class="smallboxR" @click.stop="editRess(item.id)">
								<text>修改</text>
							</view>
						</view>
					</uni-swipe-action-item>
				</uni-swipe-action>
			</scroll-view>
			<!-- 底部 -->
			<button class="addcart" @click="addCity">新增地址</button>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex'
	import {
		getCity,
		getCityDELETE
	} from '@/api/city.js'
	export default {
		data() {
			return {
				getCitylist: [],
				datal: '',
				options: [{
					text: '删除',
					style: {
						backgroundColor: "#DC143C"
					}
				}]
			};
		},
		computed: {
			...mapState('pay', ['from', 'id'])
		},
		onLoad(e) {
			this.getCity()
			this.datal = e.from
			this.VuxFrom(e.from)
			console.log(2, this.from);
		},
		methods: {
			...mapMutations('pay', ['payid', 'payfrom']),
			// vuex存储from
			VuxFrom(from) {
				this.payfrom(from)
			},
			// 购物车
			Clickcity(id) {
				if (this.datal === 'order') {
					this.payid(id)
					// 返回上一级
					uni.navigateBack()
					this.payfrom('')
				}
			},
			// 点击修改
			editRess(id) {
				uni.navigateTo({
					url: `/subpkg/address/EditRess?id=${id}&from=${this.datal}`
				})
			},
			// 删除
			async ClickDelete(id) {
				await getCityDELETE(id)
				await this.getCity()
				uni.showToast({
					title: '删除成功',
					duration: 2000
				});
			},
			// 调用基础地址信息
			async getCity() {
				const res = await getCity()
				this.getCitylist = res.result
			},
			// 点击添加
			addCity() {
				if (this.getCitylist.length >= 10) {
					return uni.showToast({
						title: '不可超过十条',
						icon: 'error',
						duration: 2000
					});
				}
				uni.navigateTo({
					url: `/subpkg/address/AddAddress`
				})
			}
		}
	}
</script>

<style lang="less">
	.box {
		// width: 753rpx;
		// height: 1269rpx;
		background: #fff;


		.smallbox {
			display: flex;
			padding: 23rpx;
			border-bottom: 1rpx ridge #eaeaea;
			justify-content: space-between;


			.smallboxL {
				width: 753rpx;

				.smallboxLtop {
					display: flex;

					.name {
						margin-right: 20rpx;
						font-size: 28rpx;
						color: #333333;
					}

					.dianhau {
						font-size: 27rpx;
						color: #999999;
					}
				}

				.smallboxLB {
					display: flex;
					padding-top: 10rpx;

					.default {
						width: 48rpx;
						// height: 33rpx;
						font-size: 24rpx;
						color: #27ba9b;
						border: 1px ridge #27ba9b;
						margin-right: 17rpx;
					}

					.city {
						margin-right: 17rpx;
						font-size: 26rpx;
						color: #333;
					}

					.address {
						font-size: 26rpx;
						color: #333;
					}
				}
			}

			.smallboxR {
				text-align: center;
				width: 93rpx;
				height: 37rpx;
				font-size: 26rpx;
				border-left: 1rpx ridge #eaeaea;
				color: #999;
				position: absolute;
				top: 0;
				right: 71rpx;
				line-height: 37rpx;
			}
		}

		.addcart {
			position: absolute;
			bottom: 30rpx;
			left: 41rpx;
			width: 671rpx;
			height: 80rpx;
			font-size: 25rpx;
			color: #fff;
			background: linear-gradient(to right, #00d2ae, #00d2ae, #00bd9a, #00bd9a);
			line-height: 80rpx;
		}
	}
</style>